import ReactDOM from "react-dom";
import React, { Component } from "react";

class Child extends Component {

  componentDidMount() {
    this.timer = setInterval(() => {
      console.log('定时器')
    }, 1000)
  }

  // 卸载钩子函数
  componentWillUnmount() {
    console.log('组件卸载')
    window.clearInterval(this.timer)
  }

  render() {
    return <h1>统计豆豆被打的次数：{this.props.count}</h1>
  }
}


class App extends Component {

  state = {
    count: 0
  }

  add = () => {
    this.setState({
      count: this.state.count + 1
    })
  }

  render() {
    return (
      <div className="app">
        {/* 豆豆打五次，就打死了 */}
        {this.state.count <= 5 && <Child count={this.state.count} />}
        <button onClick={this.add}>打豆豆</button>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));
